<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar :fixed="true" placeholder>
      <template #left>
        <img class="logo" src="../../assets/toutiao_logo.png" alt="" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" @click="searchFn"/>
      </template>
    </van-nav-bar>
    <!-- 标签栏 -->
    <!-- active控制高亮 -->
    <van-tabs
    v-model="active"
    animated
    sticky
    offset-top="1.22666667rem"
    >
      <van-tab
      v-for="obj in userChannelList"
      :key="obj.id"
      :name="obj.id"
      :title="obj.name">
        <!-- 文章列表 -->
        <article-list :channelId="active"></article-list>
      </van-tab>
    </van-tabs>
    <!-- 编辑频道+ -->
    <van-icon @click="plusClickFn" name="plus" size="0.37333334rem" class="moreChannels"/>
    <!-- 底部反馈面板 -->
    <van-action-sheet
    v-model="$store.state.homeArticleActionShow"
    :actions="actionArr"
    :cancel-text="cancelText"
    @select="onSelect"
    @cancel="cancelFn"
    @close="actionCloseFn"
    get-container="body"
     />
    <!-- 编辑频道-弹出层 -->
    <van-popup v-model="show" class="channel_edit_wrap">
      <ChannelEdit
      @closePE="closeFn"
      :userChannelList="userChannelList"
      @addChannelEvent="addChannelFn"
      @removeChannelEvent="removeChannelFn"
      v-model="active"
      ></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
// 目标: 头部导航
// 1. 自定义左侧和右侧标题内容插槽技术
// 注意: icon要先去main.js注册才能使用
// 2. 定制了nav-bar-icon-color的less变量(cover.less)

// 目标: 标签栏铺设+动画
// 1. 查找文档, 找类似的 (重要: 先从基础开始用)
// 2. 修改+增加

// 目标: 频道数据铺设
// 1. 接口文档-频道数据
// 2. api/index.js接口方法
// 3. 引入Home/index.vue -> created里发请求
// 4. 把数据循环van-tab标签
// 5. cover.less, 下面小线段颜色

// 目标: 文章列表的组件封装
// 核心: Home/index.vue > ArticleList.vue > ArticleItem.vue
// 1. 一行文章信息, van-cell单元格(直接从.md复制)
// 2. ArticleList里循环使用
// 3. van-tab组件内, 分别对应
// 重要: van-tab每个都对应一次article-list(多个被创建了互相独立)

// 目标: tab标签导航-粘性布局
// 原因: 网页有竖向滚动条, tab标签栏推上去, 需求是让他一直在
// 解决: position: sticky; tab有sticky属性
// 扩展: 粘性布局, 默认随着网页滚动, 只有到了临近值类似固定定位
// css单位小数点: 保留6-8位小数位

// 目标: tab标签导航-切换对应文章数据
// 1. van-tab设置name属性=值为频道ID (van-tabs身上v-model绑定name属性值)
// 2. active频道ID传入ArtileList.vue中, 换频道数据

// 目标: 一级反馈面板铺设
// 1. ActionSheet组件, 放到Home/index.vue
// 如果放在ArticleItem和ArticleList里, 此组件都会创建多次
// 整个首页公用一个反馈标签即可

// 目标: 一级反馈面板显示
// 1. vuex里定义state变量控制反馈面板显示/隐藏
// 2. ArticleItem.vue中, x的点击事件上
// 触发mutations, 修改state里, 影响sheet组件显示/隐藏
// 3. actions和二级反馈的数据, 提到公共的vuex里定义(固定的数据应该在统一的地方统一修改, 你就不用在找逻辑页面了)

import { getUserChannelListAPI, dislikeArticleAPI, reportArticleAPI, setUserChannelAPI, removeChannelAPI } from '@/api'
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
import { mapState, mapMutations } from 'vuex'
import { Toast } from 'vant'

export default {
  data () {
    return {
      active: 0, // 频道ID(不是索引)
      userChannelList: [], // 用户已选频道
      show: false,
      actionArr: [], // 反馈面板数据
      cancelText: '取消'
    }
  },
  computed: {
    ...mapState(['firstActions', 'secondActions', 'actionArtId'])
  },
  methods: {
    ...mapMutations(['changeActionShowMutations']),
    // 点击反馈面板选项
    async onSelect (item) { // item就是actions选项
      if (item.name === '反馈垃圾内容') {
        // 切换actions数据源为二级反馈内容
        this.actionArr = this.secondActions
        this.cancelText = '返回'
      } else if (item.name === '不感兴趣') {
        // 调用接口
        const res = await dislikeArticleAPI(this.actionArtId)
        console.log(res)
        this.changeActionShowMutations(false) // 关闭反馈面板
        Toast.success('反馈成功')
      } else {
        // 上面2个一级进不去, 进到这里肯定是二级选项
        const res = await reportArticleAPI({
          artId: this.actionArtId,
          type: item.value // 举报类型
        })
        console.log(res)

        this.changeActionShowMutations(false)
        setTimeout(() => {
          this.actionArr = this.firstActions
          Toast.success('举报成功')
        }, 200)
      }
    },
    // 反馈面板关闭
    actionCloseFn () {
      this.actionArr = this.firstActions
    },
    // 取消点击事件
    cancelFn () {
      if (this.cancelText === '返回') {
        this.changeActionShowMutations(true) // 不能让弹出层关闭
        this.actionArr = this.firstActions // 切回一级反馈项目
        this.cancelText = '取消'
      }
    },
    // +号频道编辑-点击事件
    plusClickFn () {
      this.show = true
    },
    // 编辑频道页面-关闭弹出层
    closeFn (bool) {
      this.show = bool
    },
    // 添加频道
    async addChannelFn (channelObj) {
      // 前端再装入数组里 (数据一致性)
      this.userChannelList.push(channelObj)
      // 处理用户已选频道数组 - 对象字段
      const newArr = [] // 处理后, 发给后台用
      this.userChannelList.forEach((obj, index) => {
        if (obj.id === 0) {
          // 推荐频道 - 不转换也不添加(更新时, 不传推荐频道)
        } else {
          // const newObj = obj // 对象内存地址的复制(2个变量还是同一个对象)
          const newObj = { ...obj } // 把原来对象里值拿出来, 形成一个全新对象
          // ...知识(扩展运算符)
          // 浅拷贝(obj里key和value, 浅拷贝到一个新对象里)赋予给newObj
          newObj.seq = index
          delete newObj.name
          newArr.push(newObj)
        }
      })
      // 处理后, newArr发给后台更新用户的频道
      const res = await setUserChannelAPI(newArr)
      console.log(res)
    },
    // 删除频道
    async removeChannelFn (channelId) {
      const res = await removeChannelAPI(channelId)
      console.log(res)
      // 删除数组里对应频道对象
      const index = this.userChannelList.findIndex(obj => obj.id === channelId)
      this.userChannelList.splice(index, 1)
    },
    // 搜索框-点击
    searchFn () {
      this.$router.push('/search')
    }
  },
  async created () {
    const res = await getUserChannelListAPI()
    this.userChannelList = res.data.data.channels
    // 默认反馈面板内容为一级
    this.actionArr = this.firstActions
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  destroyed () {
    // 页面离开-可能底部弹窗没关闭
    this.changeActionShowMutations(false)
  }
}
</script>

<style scoped lang="less">
// /deep/ .van-nav-bar__left img{
//   width: 100px;
//   height: 30px;
// }
.logo {
  width: 100px;
  height: 30px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

.channel_edit_wrap {
  background-color: transparent;
  height: 100%;
  width: 100%;
  background-color: white;
}

</style>
